import React, { FC, useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { useTitle } from "ahooks";
import useLoadQuestionData from '../../../hooks/useLoadQuestionData'
import styles from './index.module.scss'
import EidtCanvas from './EidtCanvas'
import LeftPanel from './LeftPanel'
import RightPanel from './RightPanel'
import EditHeader from './EditHeader'
import { changeSleectedId } from '../../../store/componetnsReducer/index'
import useGetPageInfo from '../../../hooks/useGetPageInfo';
const Edit: FC = () => {
  const { loading } = useLoadQuestionData()
  const dispatch = useDispatch()
  const { title } = useGetPageInfo()
  //修改标题
  useTitle(`问卷编辑-${title}`)
  function clearSelectedId() {
    dispatch(changeSleectedId(''))
  }
  return (
    <div className={styles.container}>
      <div>
        <EditHeader/>
      </div>
      <div className={styles['content-wrapper']}>
        <div className={styles.content}>
          <div className={styles.left}>
            <LeftPanel />
          </div>
          <div className={styles.main} onClick={clearSelectedId}>
            <div className={styles['canvas-wrapper']}>
              <EidtCanvas loading={loading} />
            </div>
          </div>
          <div className={styles.right}>
            <RightPanel/>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Edit
